<template>
  <div>
    <el-scrollbar class="menu">
      <!-- router开启路由模式  default-active="/ums/userm" 默认路由 这里有bug如果不是管理员就看不了菜单了-->
      <el-menu
        unique-opened
        active-text-color="#ffd04b"
        background-color="#545c68"
        class="el-menu-vertical-demo"
        :default-active="defaltUrl"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose" 
        :collapse="isCollapse"
        router
      >
        <el-menu-item index="/index">
          <svg-icon name="home" class="icon" />
          首页
        </el-menu-item> 
        <el-sub-menu :index="'/' + p.name" v-for="p in menus" :key="p.id">
        <!-- <el-sub-menu :index="99" v-for="p in menus" :key="p.id"> -->

          <template #title>
            <svg-icon :name="p.icon" class="icon" />
            <span>{{ p.title }}</span>
          </template>
          <el-menu-item 
            :index="'/' + p.name + '/' + sub.name" v-for="sub in p.children" :key="sub.id">
              <svg-icon :name="sub.icon" class="icon" />
              {{ sub.title}}
          </el-menu-item>
            <!-- <el-menu-item index="1-1">Dashboard</el-menu-item>
            <el-menu-item index="1-2">子菜单二</el-menu-item>
            <el-menu-item index="1-3">子菜单三</el-menu-item> -->
        </el-sub-menu>
        <!-- <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>导航二</span>
        </el-menu-item>
        <el-menu-item index="3" >
          <el-icon><document /></el-icon>
          <span>导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>导航四</span>
        </el-menu-item> -->
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import {  inject,ref , watch ,watchEffect } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { useUserStore } from '@/store/user'
import { it } from 'node:test'
import Index from '@/views/index.vue'
import { useRoute } from 'vue-router'
// import { watch } from 'fs'

//拿到pinal中的数据
const userStore = useUserStore()

//拿到菜单列表 去筛选  使用计算属性 拿到菜单列表
type menu = IMenuModel  &  {children?: IMenuModel[]}
//这是动态生成菜单 从pinal中拿到的菜单列表  动态路由也是从pinal中拿跟菜单一样的数据 生成路由
const menus = userStore.routers;   ///routers就是store中定义的pinal 中的数据 然后上面渲染即可

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const isCollapse = inject('isCollapse')

//让菜单刷新后有一个默认的展开的数据    这样就刷新还是前面点击的那个菜单
const defaltUrl = ref('/index');
const route = useRoute();
defaltUrl.value = route.path;

//数据监听 控制默认展开的菜单
watch(()=>route.path,
  ()=>{
    defaltUrl.value = route.path;
  }
);

</script>

<style lang="less" scoped>
.menu {
  margin-left: 15px;
  height: calc(100vh - 70px);
  width: 180px;
  background-color: #545c64;
  overflow-y: auto;
  //整个向左偏移
  transform: translateX(5px);
  //向上移动5px
  //控制菜单位置的滚动条 宽度设为0
  &::-webkit-scrollbar {
      width: 0;
  };
  
  .icon {
    margin-right: 10px;
    font-size: 16px;
    color: #fff;
    vertical-align: middle;
    line-height: 1;
    transform: translateY(-1px);
    transition: all 0.3s;

  }
  //菜单隐藏弹窗浮动样式
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
    
  }
}
</style>